<template>
<div>
    <contact />
    <div class=" footer m-t-100" :class="{'yyq-m-footer':isMobile}">
            <div class="container">
                <div class="flex flex-column">
                    <div class="copy">
                        COPYRIG@2022-2027 ALL RIGHTS RESERVED 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备1800001号</a> &nbsp; TECHNICAL SUPPORT: SCINGME ZXHD <a href="/policy.html" target="_blank">隐私协议</a>
                    </div>
                </div>
            </div>
            <!-- <div class="mst-padded-t-20 text-align">Copyright 股份. {{$t('footer.txt')[3]}}</div> -->
            <div class="warning"> {{ $t('footer.footerList[0]') }}</div>
                <div class="footer-bottom">
                    <p>{{ $t('footer.footerList[1]') }}</p>
                    <p>{{ $t('footer.footerList[2]') }}</p>
                    <p>{{ $t('footer.footerList[3]') }}</p>
                    <p style="margin-bottom: 10px;">{{ $t('footer.footerList[4]') }}</p>
                    <div class="footer-bottom-btn-box">
                    <a>{{ $t('footer.footerBottonList[0]') }} </a>
                    <a>{{ $t('footer.footerBottonList[1]') }}</a>
                    <a>{{ $t('footer.footerBottonList[2]') }}</a>
                    <a>{{ $t('footer.footerBottonList[3]') }}</a>
                    <a>{{ $t('footer.footerBottonList[4]') }}</a>
                </div>
                    <div class="footer-bottom-bottom">
                    
                    </div>
            </div>

    </div>
  
</div>
</template>

<script>
import api from "~/assets/js/api";
import { mapGetters } from "vuex";
import contact from "../Contact/contact.vue"
import {
    mapMutations
} from "vuex";
export default {
    components: {
        contact
    },
    props: {
        datas: {
            type: Object,
            default: () => {
                return {
                    datas: {
                        phone: "150-9991-8643",
                        logo: require("static/image/logo.png")
                    }
                };
            }
        },
        // isMobile: {
        //   type: Boolean
        // }
    },
    data() {
        return {
            visible: false,
            isMobile: false,
            form: {
                phone: ''
            },
            rules: {
                phone: [{
                    required: true,
                    message: 'is require',
                    trigger: 'blur'
                }]
            },
        };
    },
    computed: {
    ...mapGetters(['locale'])
    },
    mounted() {
        this.isMobile = this.storage.mb()
    },
    methods: {
        // async category () {
        //   let res = await api.nav.treeList();
        //   if (res) {
        //     this.list = res.slice(1, 5);
        //     this.list[2].children = this.list[2].children.slice(0, 4);
        //     // console.log(this.list);
        //   }
        // },
        toNext(item) {
            this.$router.push({
                path: item.path
            })
        }
    }
};
</script>

<style lang="less" scoped>
.footer {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Arial";
}

.full-container {margin: 0 auto; max-width:1920px; min-width:1280px; position: relative;background-color: #fff;}
.container{margin: 0 auto; max-width:1280px; position:relative;}
ul,
ol,
dl {
    margin: 1em 0;
}


ul {
    padding-left: 1em;
}

ol {
    padding-left: 2em;
}

ul>li,
ol>li,
dt,
dd {
    line-height: 1.75;
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 0;
    margin-bottom: 1em;
}

table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

td,
th {
    padding: .5em;
}

b,
strong {
    font-weight: bold;
}
.fol  dl dd a{
    color: #777;
}
.fol  .home{
    margin-left: 60px !important;
}
.txtleft{
    text-align: center;
    justify-content: space-around;
}
.txtleft dd{
    text-align: left;
}
.txtleft dt{
     text-align: left;
     white-space: nowrap;
}

/*flex*/
.flex{display:flex;}
.flex-inline{display:inline-flex;}
.flex-inline-important{display:inline-flex !important;}
.flex-reverse{flex-direction:row-reverse;}
.flex-column{flex-direction:column;}
.flex-column.flex-reverse{flex-direction:column-reverse;}
.flex-nowrap{flex-wrap:nowrap;}
.flex-wrap{flex-wrap:wrap;}
.flex-wrap-reverse{flex-wrap:wrap-reverse;}
.flex-start{justify-content:flex-start;}
.flex-center{justify-content:center;}
.flex-end{justify-content:flex-end;}
.flex-between{justify-content:space-between;}
.flex-around{justify-content:space-around;}
.flex-evenly{justify-content:space-evenly;}
.flex-items-start{align-items:flex-start;}
.flex-items-center{align-items:center;}
.flex-items-end{align-items:flex-end;}
.flex-items-baseline{align-items:baseline;}
.flex-items-stretch{align-items:stretch;}
.flex-self-start{align-self:flex-start;}
.flex-self-center{align-self:center;}
.flex-self-end{align-self:flex-end;}
.flex-self-baseline{align-self:baseline;}
.flex-self-stretch{align-self:stretch;}
.flex-content-start{align-content:flex-start;}
.flex-content-center{align-content:center;}
.flex-content-end{align-content:flex-end;}
.flex-content-between{align-content:space-between;}
.flex-content-around{align-content:space-around;}
.flex-middle{justify-content:center;align-items:center;align-self:center;align-content:center;}
.flex-fill{flex:1 1 auto;}
.flex-grow{flex-grow:1;}
.flex-shrink{flex-shrink:1;}
.margin-middle-auto{margin:auto 0;}
.flex-none{flex:none;}

.contact-t {
    font-size: 36px;
    color: #FFF;
    text-align: center;
    font-weight: bold;
    line-height: 1;
}

.contact-c {
    text-align: center;
}

.contact-c span {
    padding: 15px 50px;
    background: #FFF;
    color: #000;
    text-align: center;
    border-radius: 100px;
    font-size: 20px;
    font-weight: 200;
}

.contact-p {
    text-align: center;
    color: #FFF;
    font-size: 14px;
    font-weight: 200;
    line-height: 1;
    margin-top: 30px;
}

.contact-p .contact-p-item {
    padding: 0 30px;
    position: relative;
    align-items: center;
}
.yyq-m-footer{
    width: 100%;
    align-items: center;
}
.contact-p .contact-p-item::after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    display: block;
    content: "";
    font-size: 12px;
    width: 1px;
    height: 12px;
    overflow: hidden;
    background: #b17777;
}

.contact-p .contact-p-item:last-child::after {
    display: none;
}

.contact-p i {
    margin-right: 10px;
}

.contact-p i {
    width: 20px;
    height: 20px;
}

.footer {
    padding: 30px 0px;
    border-top: 1px solid #F1F1F1;
}

.footer-nav dl {
    padding-right: 60px;
    margin-left: 60px;
}

.footer-nav dt {
    font-size: 20px;
    position: relative;
    margin-bottom: 20px;
}

.footer-nav dd {
    font-size: 14px;
    line-height: 1.5;
}

.footer-nav dd a {
    color: #24211d
}

.footer-nav dd a:hover {
    color: #000
}

.footer-copy {
    text-align: right;
}

.footer-nav dl.home {
    margin-left: 0px;
}

.footer-nav dt::after {
    content: "/";
    position: absolute;
    right: -60px;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 12px;
    color: #DEDEDE;
    display: block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    font-weight: 500;
}

.footer-nav dl:last-child {
    padding-right: 0;
}

.footer-nav dl:last-child dt::after {
    display: none;
}
.copy {font-size: 12px; font-weight: 200; text-align: center;}
.links {padding: 20px 0px}
.links a {border: 1px solid #DEDEDE; border-radius: 5px; padding:2px 10px; margin: 0 30px;}
.links a:hover {border-color: #E83F00;}
a,a:link{text-decoration:none;color:#000;transition:all 0.5s ease;}
a:active,a:hover{outline:0;color:#ea1c26 !important;text-decoration:none;}
a:focus{text-decoration:none;outline:thin dotted;outline:0.5em auto -webkit-focus-ring-color;}


.warning {
    width: 100%;
    padding: 20px 0;
    border-top: 1px solid;
    border-bottom: 1px solid;
    font-size: 14px;
    color: rgb(80, 80, 80);
    line-height: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.footer-bottom {
    width: 100%;
    padding: 0 20px;
    text-align: center;
    p {
        font-size: 14px;
        line-height: 19px;
        color: rgb(80, 80, 80);
    }
    .footer-bottom-btn-box {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 10px;
        a {
            color: rgb(0, 87, 137);
            font-size: 14px;
            cursor: pointer;
            margin-right: 12px;
        }
    }
    .footer-bottom-bottom {
        display: flex;
        justify-content: center;
    }
}
</style>
